<template>
  <n-button @click="openAddStudents" type="primary">新增班级</n-button>
  <!--添加班级模态框-->
  <n-modal
      v-model:show="showModal"
      :mask-closable="false"
      preset="dialog"
      :title="state.type==='add'?'新增班级':'修改班级'"
  >
    <n-form
        ref="formRef"
        :model="newClass"
        :rules="rules"
        label-placement="left"
        label-width="auto"
        require-mark-placement="right-hanging"
        size="medium"
        :style="{
                    maxWidth: '640px'
                }"
    >
      <n-form-item label="班级编号" path="class_id">
        <n-input v-model:value="newClass.class_id" type="text" placeholder="班级编号"/>
      </n-form-item>
      <n-form-item label="班级名称" path="class_name">
        <n-input v-model:value="newClass.class_name" type="text" placeholder="班级名称"/>
      </n-form-item>
      <n-form-item label="入学时间" path="join_school">
        <n-date-picker v-model:value="newClass.join_school" type="date" :format="'yyyy-MM-dd'"/>
      </n-form-item>
      <n-form-item label="指导老师" path="teacher">
        <n-select
            v-model:value="newClass.teacher"
            multiple
            :options="useAdmin.teacher['enable']"
            value-field="id"
            label-field="name"
            placeholder="指导老师"/>
        <span style="font-size: 10px;width: 70px"><add-teacher>新增教师</add-teacher></span>
      </n-form-item>
      <n-form-item label="专业名称" path="cp">
        <n-cascader
            v-model:value="newClass.cp"
            placeholder="选择学院专业"
            :options="useAdmin.academy"
            check-strategy="child"
            size="small"
        />
      </n-form-item>
      <!--两个按钮-->
      <div style="display: flex; justify-content: flex-end">
        <n-button @click="onNegativeClick">
          取消
        </n-button>
        <n-button type="primary" @click="handleValidateButtonClick">
          确定
        </n-button>
      </div>
    </n-form>

  </n-modal>
</template>

<script setup>

import {NButton} from "naive-ui";
import workApi from "@/http/workApi";
import {useAdminStore} from "@/stores/admin";
import AddTeacher from "@/components/admin/新建模态框/AddTeacher.vue";

const useAdmin = useAdminStore()
// 模态框展示
const showModal = ref(false)
// 状态  默认为新增班级
const state = reactive({
  type: 'add',
  apiMethod: 'post',
})
// 新增班级所需信息
let newClass = ref({
  class_id: null,
  class_name: null,
  join_school: 1693497600000,
  teacher: [],
  cp: null
})


// 验证规则
const rules = {
  class_id: {
    required: true,
    trigger: ['blur'],
    message: '未填'
  },
  class_name: {
    required: true,
    trigger: ['blur'],
    message: '未填'
  },
  teacher: {
    required: true,
    type: 'array',
    trigger: ['blur'],
    message: '未填'
  },
  cp: {
    required: true,
    trigger: ['blur'],
    message: '未填'
  },
}

let onNegativeClick = () => {
  showModal.value = false
  newClass.class_id = null
  newClass.class_name = null
  newClass.join_school = 1693497600000
  newClass.teacher = []
  newClass.cp = null
}
let addClass = () => {
  let data = {...newClass.value}
  data.join_school = data.join_school / 1000
  workApi({
    method: state.apiMethod,
    url: 'admin/class',
    data: data
  }).then(() => {
    useAdmin.setClass()
    onNegativeClick()
  })
}
// 执行验证
const formRef = ref(null);
const handleValidateButtonClick = (e) => {
  e.preventDefault()
  formRef.value?.validate((errors) => {
    if (!errors) {
      addClass()
    } else {
      window.$message.error('好像没有填好, 检查一下吧')
    }
  })
}
let openAddStudents = () => {
  state.apiMethod = 'post'
  state.type = 'add'
  showModal.value = true
}
const openModifiedClass = (data) => {
  state.apiMethod = 'put'
  state.type = 'modified'

  // 将被修改的数据传入
  newClass.value = {...data}
  // 将时间戳从秒变成毫秒
  newClass.value.join_school = newClass.value.join_school * 1000
  // 学院与专业组合--cp
  newClass.value.cp = newClass.value.college_id + '-' + newClass.value.profession_id
  // 将教师姓名换成教师id
  newClass.value.teacher = newClass.value.teacher.split(', ').map((s) => {
    useAdmin.teacher.enable.map((v) => {
      if (v.name === s) {
        s = v.id
        return v
      }
    })
    return s
  })
  showModal.value = true
}
defineExpose({
  openModifiedClass
})
</script>

<style scoped lang="less">
.n-button {
  margin: 15px;
}
</style>